﻿// BarChart.js
import React from 'react';
import Echarts from 'echarts-for-react';

const BarChart = ({ data, title }) => {
  const colors = ['#5793f3', '#d14a61', '#675bba', '#e8684a', '#2fc25b', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
  const option = {
    title: {
      text: title,
      left: 'center'
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: Object.keys(data),
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '数值',
      type: 'bar',
      data: Object.values(data),
      itemStyle: {
        color: function(params) {
          // 返回一个颜色数组中的颜色，根据数据索引
          return colors[params.dataIndex];
        }
      },
      animation: true,
      animationDurationUpdate: 50,
      animationEasingUpdate: 'cubicOut'
    }],
  };

  return (
    <div>
      <Echarts
        option={option}
        style={{ height: '400px', width: '100%' }}
        lazyUpdate={true}
      />
    </div>
  );
};

export default BarChart;